<div class="card">
  <div class="card-body">
    <h2 class="card-title text-primary">List group</h2>
    <ul class="list-group">
      <li class="list-group-item active">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <hr>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
    </div>
    <hr>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
      </li>
    </ul>        
  </div>
</div>